<template>
  <div class="detailBox">
    <el-card>
      <div class="top">
        <h2>{{data.title}}</h2>
        <div class="person">
          <div class="left">
            <el-avatar size="large" :src="data.user?.avatar? data.user.avatar : circleUrl"></el-avatar>
          </div>
          <div class="right">
            <div class="name">{{data.user?.username}}</div>
            <div class="detail">发布于{{ data.publishTime?.replace("T",' ')}}</div>
          </div>
        </div>
      </div>
      <div class="center" v-html="data.content">

      </div>
      <div class="bottom"></div>
    </el-card>
    <div class="comment">
      <comment></comment>
    </div>
  </div>
</template>

<script>
import comment from './comment.vue'
import { getPostInfo } from '@/api/post'

export default {
  components: {
    comment
  },
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      data: {},
      commentList: []
    }
  },
  mounted() {
    const id = this.$route.params.id
    if (id) {
      getPostInfo(id).then(res => {
        this.data = res.data
        this.$store.commit('moment/setUserId', res.data.userId)
      })
      this.$store.dispatch('moment/getCommentListFn', id)
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
  margin-top: 5px;
}
.top {
  .person {
    display: flex;
    align-items: center;

    .right {
      padding: 5px;
      flex: 1;
      margin-left: 5px;
      border-bottom: 1px solid #c3c3c3;
      color: #c3c3c3;
      .name {
        font-weight: 700;
        color: black;
      }
    }
  }
}
.center {
  width: 702px;
  margin: 20px auto;
  color: rgb();
}
</style>